<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <style>
        .a {
            position: relative;
            width: 320px;
            height: 200px;
            background-color: #000000;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }
            video {
                object-fit: fill;
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                width: 100%;
                height: 200px;
        }

    </style>
</head>
</head>
<body>

<textarea rows="3" cols="20" id="uu"></textarea>
<button id="tt">提交</button>
    <div  class="a" style="display: none" id="t">
        <video
                id="mm"
                class="video-js vjs-big-play-centered"
                controls
                preload="auto"
                poster="//vjs.zencdn.net/v/oceans.png"
                data-setup='{}'
        >
            <source src="" type="video/mp4"></source>
        </video>

    </div>


<script type="text/javascript">

    $("#tt").click(function(){
        var url = $("#uu").val();
        $.ajax({
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded',
            url: 'realUrl',
            data: {'url':url},
            success: function (data) {
                alert(data);

                document.getElementById("my-mm").src=data ;
                alert(data);
                document.getElementById("my-mm").play();
                $("#t").show();
            },
            error: function (data) {
                alert(data);
            }
        });
    });


</script>

</body>
</html>